<template>
  <div>
    <el-row :gutter="15" style="margin: 10px 0 20px">
      <el-col :span="11">
        <div>
          <el-card :body-style="{ margin: '0 20px' }">
            <div style="width: 100%; height: 160px">
              {{ msg }}
            </div>
          </el-card>
          <div style="margin-top: 30px">
            <el-input
              style="width: 300px; margin: 0 5px"
              placeholder="查询姓名"
              v-model="name"
            />
            <el-button type="success" @click="load(1)">查询</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
          </div>
          <div style="margin: 10px">
            <el-button type="primary" plain @click="handleAdd">新增</el-button>
            <el-button type="danger" plain @click="delBatch"
              >批量删除</el-button
            >
            <el-button type="info" plain @click="exportData"
              >批量导出</el-button
            >
            <!--:action="$baseURL + '/user/import'"-->
            <el-upload
              action="http://localhost:9999/user/import"
              :headers="{ token: user.token }"
              :on-success="handleImport"
              style="display: inline-block; margin-left: 10px"
              :show-file-list="false"
            >
              <el-button type="primary" plain>批量导入</el-button>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="13" :gutter="0">
        <el-card>
          <!-- 图表 -->
          <el-col :span="16"
            ><div id="myChart" :style="{ width: '37vw', height: '300px' }"></div
          ></el-col>
          <!-- 下拉框 -->
          <el-col :span="8">
            <el-dropdown
              split-button
              type="primary"
              trigger="click"
              @command="handleCommand"
              style="float:right"
            >
              {{ dropvalue }}
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in options"
                  :key="item.id"
                  :command="item.id"
                  @click="handoff(item.id)"
                  >{{ item.value }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-card>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      stripe
      :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="学号" prop="id" width="70" align="center" />
      <el-table-column label="姓名" prop="name" align="center" />
      <el-table-column label="政治面貌" prop="phone" align="center" />
      <el-table-column label="性别" prop="email" align="center" />
      <el-table-column label="专科毕业院校" prop="address" align="center" />
      <el-table-column label="专科所学专业名称" prop="address" align="center" />
      <el-table-column
        label="是否为计算机类相关专业"
        prop="role"
        align="center"
      />
      <el-table-column label="专科毕业院校" prop="address" align="center" />
      <el-table-column
        label="毕业后职业生涯规划"
        prop="address"
        align="center"
      />
      <el-table-column label="未来求职方向" prop="role" align="center" />
      <el-table-column label="特长" align="center" width="180px">
        <template v-slot="scope">
          <el-button
            size="mini"
            type="primary"
            plain
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" plain @click="del(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div style="margin: 10px 0">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog title="用户信息" :visible.sync="formVisible" width="30%">
      <el-form
        :model="form"
        label-width="80px"
        style="margin-right: 20px"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="学号" prop="phone">
          <el-input v-model="form.phone" placeholder="电话" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="姓名" />
        </el-form-item>
        <el-form-item label="政治面貌" prop="email">
          <el-input v-model="form.email" placeholder="邮箱" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input type="textarea" v-model="form.address" placeholder="地址" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-radio-group v-model="form.role">
            <el-radio label="管理员"></el-radio>
            <el-radio label="用户"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9999/file/upload"
            list-type="picture"
            :headers="{ token: user.token }"
            :file-list="form.avatar ? [form.avatar] : []"
            :on-success="handleAvatarSuccess"
          >
            <el-button type="primary">上传头像</el-button>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="formVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "Students",
  data() {
    return {
      tableData: [], // 所有数据
      pageNum: 1, // 当前页
      pageSize: 5, // 没页显示个数
      username: "",
      name: "",
      total: 0,
      formVisible: false,
      form: {},
      user: JSON.parse(localStorage.getItem("honey-user") || "{}"),
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
      },
      ids: [],
      options: [
        {
          id: 1,
          value: "政治面貌",
        },
        {
          id: 2,
          value: "性别",
        },
        {
          id: 3,
          value: "专科毕业院校",
        },
        {
          id: 4,
          value: "专科所学专业",
        },
        {
          id: 5,
          value: "计算机相关专业",
        },
        {
          id: 6,
          value: "未来求职方向",
        },
      ],
      msg: "根据政治面貌统计该学生数据中共青团员有多少人占比最高达多少百分之比例？入党积极分子次支共有多少人？占比百分之多少？群众人数略高于入党积极分子占比百分之多少？党员人数最少占比？多少仅多少人？",
      dropvalue: "政治面貌",
    };
  },
  created() {
    this.load();
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    handleCommand(command) {
      switch (command) {
        case 1:
          this.dropvalue = "政治面貌";
          this.msg =
            "根据政治面貌统计该学生数据中共青团员有多少人占比最高达多少百分之比例？入党积极分子次支共有多少人？占比百分之多少？群众人数略高于入党积极分子占比百分之多少？党员人数最少占比？多少仅多少人？";
          this.drawLine();
          break;
        case 2:
          this.dropvalue = "性别";
          this.msg = "2222";
          this.drawLine2();
          break;
        case 3:
          this.dropvalue = "专科毕业院校";
          this.msg = "333";
          this.drawLine3();
          break;
        case 4:
          this.dropvalue = "专科所学专业";
          this.msg = "444";
          this.drawLine4();
          break;
        case 5:
          this.dropvalue = "计算机相关专业";
          this.msg = "555";
          this.drawLine5();
          break;
        case 6:
          this.dropvalue = "未来求职方向";
          this.msg = "666";
          this.drawLine6();
          break;
      }
    },
    // 政治表
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "学生政治面貌百分比",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          left: "0%",
          height: "auto",
          orient: "vertical",
        },
        // 自定义标签
        label: {
          alignTo: "edge",
          formatter: "{name|{b}}\n{value|{c} 人}",
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            value: {
              fontSize: 12,
              color: "#999",
            },
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: [50, 90],
            data: [
              { value: 1048, name: "群众" },
              { value: 735, name: "共青团员" },
              { value: 80, name: "党员" },
              { value: 484, name: "预备党员" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    // 性别表
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "性别",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "85%",
          left: "center",
        },
        xAxis: {
          type: "category",
          data: ["男", "女"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [520, 200],
            type: "bar",
          },
        ],
      });
    },
    // 专科院校表
    drawLine3() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "专科院校",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "85%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "沈阳职业学院" },
              { value: 735, name: "辽宁职业学院" },
              { value: 580, name: "大连职业学院" },
              { value: 484, name: "辽宁金融职业学院" },
              { value: 300, name: "辽宁农业职业学院" },
            ],
          },
        ],
      });
    },
    // 专科专业表
    drawLine4() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "专科所学专业",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "85%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "软件技术" },
              { value: 735, name: "大数据技术" },
              { value: 580, name: "云计算技术" },
              { value: 484, name: "工商管理" },
              { value: 300, name: "测绘工程" },
            ],
          },
        ],
      });
    },
    // 计算机专业相关占比
    drawLine5() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "计算机专业相关占比",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "计算机方向" },
              { value: 735, name: "非计算机方向" },
            ],
          },
        ],
      });
    },
    //求职
    drawLine6() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "求职方向",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 150],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 40, name: "开发岗" },
              { value: 38, name: "运维岗" },
              { value: 32, name: "测试岗" },
              { value: 30, name: "算法岗" },
              { value: 28, name: "销售岗" },
              { value: 26, name: "产品岗" },
              { value: 22, name: "数据分析岗 " },
              { value: 18, name: "网络维护岗" },
            ],
          },
        ],
      });
    },
    handleImport(res, file, fileList) {
      if (res.code === "200") {
        this.$message.success("操作成功");
        this.load(1);
      } else {
        this.$message.error(res.msg);
      }
    },
    exportData() {
      // 批量导出数据
      /*if (!this.ids.length) { // 没有选择时，全部导出，或者通过搜索条件导出
          window.open(this.$baseURL + '/user/export?token=' + this.user.token
              + "&username=" + this.username + "&name="  + this.name)
        } else {
          let idsStr = this.ids.join(',')
          window.open(this.$baseURL + '/user/export?token=' + this.user.token + "&ids=" + idsStr)
        }*/

      if (!this.ids.length) {
        // 没有选择时，全部导出，或者通过搜索条件导出
        window.open(
          "http://localhost:9999/user/export?token=" +
            this.user.token +
            "&username=" +
            this.username +
            "&name=" +
            this.name
        );
      } else {
        let idsStr = this.ids.join(",");
        window.open(
          "http://localhost:9999/user/export?token=" +
            this.user.token +
            "&ids=" +
            idsStr
        );
      }
    },
    delBatch() {
      if (!this.ids.length) {
        this.$message.warning("请选择数据");
        return;
      }
      this.$confirm("您确认批量删除数据吗？", "确认删除", {
        type: "warning",
      }).then((response) => {
        this.$request
          .delete("/user/delete/batch", { data: this.ids })
          .then((res) => {
            if (res.code === "200") {
              // 操作成功
              this.$message.success("操作成功");
              this.load(1);
            } else {
              this.$message.error(res.msg); // 弹出错误信息
            }
          });
      });
    },
    handleSelectionChange(rows) {
      // 当前选中的所有数据
      this.ids = rows.map((v) => v.id);
    },
    del(id) {
      this.$confirm("确认删除吗？", "确认删除", { type: "warning" })
        .then((response) => {
          this.$request.delete("/user/delete/" + id).then((res) => {
            if (res.code === "200") {
              // 操作成功
              this.$message.success("操作成功");
              this.load(1);
            } else {
              this.$message.error(res.msg); // 弹出错误信息
            }
          });
        })
        .catch(() => {});
    },
    handleEdit(row) {
      // 编辑数据
      this.form = JSON.parse(JSON.stringify(row)); // 给 form 对象赋值,注意要深拷贝数据
      this.formVisible = true; // 打开弹窗
    },
    handleAdd() {
      // 新增数据
      this.form = { role: "用户" }; // 新增数据的时候清空数据
      this.formVisible = true; // 打开弹窗
    },
    save() {
      // 保存按钮触发逻辑 触发新增或更新
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$request({
            url: this.form.id ? "user/update" : "user/add",
            method: this.form.id ? "PUT" : "POST",
            data: this.form,
          }).then((res) => {
            if (res.code === "200") {
              // 成功保存
              this.$message.success("保存成功");
              this.load(1);
              this.formVisible = false; // 关闭弹窗
            } else {
              this.$message.error(res.msg); // 弹出错误信息
            }
          });
        }
      });
    },
    reset() {
      (this.name = ""), (this.username = ""), this.load();
    },
    load(pageNum) {
      if (pageNum) this.pageNum = pageNum;
      this.$request
        .get("/user/selectByPage", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            username: this.username,
            name: this.name,
          },
        })
        .then((res) => {
          this.tableData = res.data.records;
          this.total = res.data.total;
        });
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum);
    },
    handleAvatarSuccess(response, file, fileList) {
      // 将user的头像换成上传图片的链接
      this.form.avatar = response.data;
    },
  },
};
</script>

<style>
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 150px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
